<script lang="ts">
  import FeedbackModal from '@/components/taskmanager/showModal.vue';
  import { defineComponent, ref ,onMounted } from "vue";
  import OpenAPIClientAxios from 'openapi-client-axios';


  const api = new OpenAPIClientAxios({
    definition:"http://clusters.luo980.com:11004/apidocs.json",
    axiosConfigDefaults: {
      baseURL: 'http://clusters.luo980.com:11004'
    }
  })
 


const client = await api.init();

// 修改为
// async function initClient() {
//   const client = await api.init();
//   return client;
// }
// const client = initClient();







  //获取一个组
  // client['Get groups']()
  //   .then(response => console.log("group data" + response.data))
  //   .catch(error => console.error(error));
  // //获取所有节点
  // client['Get nodes']()
  //   .then(response => console.log("nodes data" + response.data))
  //   .catch(error => console.error(error));




  export default defineComponent({
    components:{
      FeedbackModal
    },
    props: {
    // 接收 v-model 传递的值
    modelValue: {
      type: Object,
      required: true
    },
  },
    setup(props) {
      const activeTab = ref("yaml");
      const activeTabs = ref("CreateByInput")
      // 弹窗状态
      const isModalVisible = ref(false);
      const modalTitle = ref('弹窗标题');
      const modalMessage = ref('this is a  feedback message');

      //获取textarea的值
      const textareaValueJson = ref("")
      const textareaValueYaml = ref("")
    


      onMounted(async () => {
      })

      const onCreate = () => {
        console.log(111111111111)
      }

      const submitTask = () => {
        console.log(222222222)
        console.log(props.modelValue)
        const clusterType:string = props.modelValue.cluster_type
        const taskType:string = props.modelValue.task_type
        const clusterNodes:string = props.modelValue.cluster_nodes
        console.log(clusterType)
        console.log(taskType)
        console.log(clusterNodes)
        console.log("当前tab:" + activeTab.value)
        console.log(textareaValueJson.value)
        console.log(JSON.parse(textareaValueJson.value))
        const task_info = JSON.parse(textareaValueJson.value)
        const task_name = task_info.spec.name
        console.log(task_name)
        console.log(textareaValueYaml.value)

        //向后端发送请求
        try {
          const response = client.request({
            method: 'POST',
            url: '/framework/v1/task?Namespace=test&Name='+task_name,
            data: task_info,                  
            headers: {
              'Content-Type': 'application/json',
            },
          });
          const timer = setTimeout(()=>{
              isModalVisible.value = true
              modalTitle.value = "超时"
              modalMessage.value = '任务提交超时！请检查json配置和服务器！'
            },5000)
          response.then((res) => {
            console.log(res.status)
            if(res.status == 200){
              isModalVisible.value = true
              modalTitle.value = "通知"
              modalMessage.value = '任务提交完成！'
              clearTimeout(timer)
            }else{
              isModalVisible.value = true
              modalTitle.value = "错误"
              modalMessage.value = '任务提交失败！请检查json配置和服务器！'
              clearTimeout(timer)
            }
          })
        } catch (error) {
          console.error('Error:', error);
        }
      }
  
      return { activeTab, activeTabs, onCreate,submitTask,isModalVisible,modalTitle,modalMessage,textareaValueJson,textareaValueYaml};
    },
  });
  </script>
<template>
    <div class="dialog-overlay">
      <div class="dialog-box custom-size">
        <div class="dialog-header">
          <h3>任务创建</h3>
          <button class="close-button" @click="$emit('close')">×</button>
        </div>
        <div class="Tabs">
            <button :class="{ active: activeTabs === 'CreateByInput' }" @click="activeTabs = 'CreateByInput'">输入并创建</button>
            <button :class="{ active: activeTabs === 'CreateByFile' }" @click="activeTabs = 'CreateByFile'">从文件创建</button>
            <button :class="{ active: activeTabs === 'CreateByForm' }" @click="activeTabs = 'CreateByForm'">从表单创建</button>
        </div>

        <div v-if="activeTabs === 'CreateByInput'" class="dialog-content" >
          <!-- Tab Navigation -->
            <div class="tabs">
                <button :class="{ active: activeTab === 'yaml' }" @click="activeTab = 'yaml'">YAML</button>
                <button :class="{ active: activeTab === 'json' }" @click="activeTab = 'json'">JSON</button>
            </div>
            
            <!-- Tab Content -->
            <textarea v-if="activeTab === 'yaml'" class="tab-content" v-model="textareaValueYaml" placeholder="请输入yaml代码"></textarea>
            <textarea v-if="activeTab === 'json'" class="tab-content" v-model="textareaValueJson" placeholder="请输入json代码" ></textarea>
        </div>
        <div v-if="activeTabs === 'CreateByFile'" class="dialog-content">文件创建</div> 
        <div v-if="activeTabs === 'CreateByForm'" class="dialog-content">
          <v-card>
            <v-row style="margin: 10px;">
              <v-label>请选择任务模板：</v-label>
              <v-col cols="12" sm="6">
                <v-select
                  v-model="typeTask"
                  label="任务模板"
                  :items="['推理任务','检测任务','上传任务']"
                />
              </v-col>
            </v-row>
            <v-row style="margin: 10px;">
              <v-col>
                <v-label>任务名称：</v-label>
                <input v-model="taskNameInput" placeholder="请输入任务名称" style="border:1px black solid">
              </v-col>

              <v-col  style="display: flex;">
                <v-label>目标集群：</v-label>
                <v-select
                  v-model="targetCluster"
                  label="目标集群"
                  :items="['云集群','边集群','端集群']"
                  style="width:300px"
                />
              </v-col>

            </v-row>
            <v-row style="margin: 10px;">
              <v-label>任务类型：</v-label>
              <input v-model="taskTypeInput" placeholder="请输入任务类型" style="border:1px black solid">
            </v-row>
            <v-row style="margin-left: 10px;">
              <v-label>任务参数：</v-label>
              <v-textarea style="height: 300px;width: 100%;border:1px black solid;">

              </v-textarea>
            </v-row>
          </v-card>


        </div> 
        <div class="dialog-footer">
                <button @click="submitTask">创建</button>
                <button @click="$emit('close')">取消</button>
        </div> 
        <FeedbackModal
          class="modal"
          :title="modalTitle"
          :message="modalMessage"
          :visible="isModalVisible"
          @close="isModalVisible = false"
        />
      </div>
    </div>
  </template>
  
  
  
  <style scoped>
  .tab-content {
    margin-top: 10px;
    display: flex;
    height: 600px;
    width: 100%;
    border: #333 1px solid;
  }
  .dialog-box.custom-size {
    width: 1200px; /* 自定义宽度 */
    height: 2000px; /* 自定义高度 */
    z-index: 9999;
  }
  .Tabs {
    display: flex;
  }
  .Tabs button {
    height: 50px;
    width: 150px;
    border: #333 3px solid;
    border-radius: 5px;
    display: inline;
    margin:10px;
    align-items: flex-start;
  }

  .Tabs button.active{
    background-color: gray;
  }

  .dialog-overlay {
      margin-top: 5%;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
  }
  
  .dialog-box {
    background: white;
    width: 500px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  .dialog-header {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }
  
  .dialog-header h3 {
    margin: 0;
  }
  
  .close-button {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
  }
  
  .dialog-content {
    padding: 20px;
    height: 700px;
  }
  
  .tabs {
    display: flex;
    border-bottom: 1px solid #eee;
  }
  
  .tabs button {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  
  .tabs button.active {
    border-bottom: 2px solid #007BFF;
    font-weight: bold;
  }
  
  .tab-content {
    padding: 20px 0;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    border-top: 1px solid #eee;
  }
  
  .dialog-footer button {
    margin-left: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .dialog-footer button:first-child {
    background-color: #007BFF;
    color: white;
  }
  
  .dialog-footer button:last-child {
    background-color: #f5f5f5;
    color: #333;
  }
  
</style>
  